Framework7 এর বিল্ট-ইন Animation এবং Transitions ব্যবহার করা

Framework7 একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশন তৈরিতে অ্যানিমেশন এবং ট্রানজিশনকে সহজে এবং কার্যকরভাবে ব্যবহারের সুবিধা প্রদান করে। এটি ডিফল্টভাবে বিভিন্ন অ্যানিমেশন এবং ট্রানজিশন সাপোর্ট করে, যা আপনার অ্যাপের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করে তোলে। নিচে Framework7 এর বিল্ট-ইন অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করার বিভিন্ন উপায় এবং উদাহরণগুলো আলোচনা করা হলো।

১. পেজ ট্রানজিশন (Page Transitions)

Framework7 এর রাউটার সিস্টেম পেজ লোড এবং আনলোডের সময় বিভিন্ন ধরনের অ্যানিমেশন ব্যবহার করে। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে স্লাইড, ফেইড, এবং অন্যান্য ট্রানজিশন ইফেক্ট প্রদান করে।

ডিফল্ট পেজ ট্রানজিশন

Framework7 ডিফল্টভাবে পেজ ট্রানজিশন হিসেবে স্লাইড ইন/আউট ব্যবহার করে। উদাহরণস্বরূপ, iOS থিমে পেজ ডান থেকে বামে স্লাইড করে আসে, আর Material Design থিমে উপরে থেকে নিচে।

// নতুন পেজে নেভিগেট করা
app.router.navigate('/about/');

কাস্টম পেজ ট্রানজিশন

আপনি যদি কাস্টম ট্রানজিশন ব্যবহার করতে চান, তবে রাউট কনফিগারেশনে transition অপশন যোগ করতে পারেন।

{
  path: '/about/',
  url: './pages/about.html',
  options: {
    transition: 'f7-cover' // উদাহরণস্বরূপ, 'f7-cover' ট্রানজিশন ব্যবহার করা
  }
}

পেজ ট্রানজিশন বন্ধ করা

যদি আপনি কোনও পেজ ট্রানজিশন না চান, তাহলে animate অপশন false করতে পারেন।

{
  path: '/about/',
  url: './pages/about.html',
  options: {
    animate: false // ট্রানজিশন বন্ধ করা
  }
}

২. Modal এবং Popup অ্যানিমেশন

Framework7 এর Modal (মডাল), Popup (পপআপ), Sheet, এবং Action Sheet কম্পোনেন্টগুলোতে ডিফল্ট অ্যানিমেশন সাপোর্ট করে, যা এগুলোকে হালকা ফেইড বা স্লাইড ইন/আউট ইফেক্ট প্রদান করে।

পপআপ ওপেন এবং ক্লোজ অ্যানিমেশন

// পপআপ ওপেন করা
app.popup.open('.my-popup');

// পপআপ ক্লোজ করা
app.popup.close('.my-popup');

ডায়ালগ অ্যানিমেশন

// এলার্ট ডায়ালগ ওপেন করা
app.dialog.alert('Hello Framework7!', function () {
  console.log('Alert closed');
});

কাস্টম অ্যানিমেশন সহ মডাল

আপনি CSS ব্যবহার করে মডালের ওপেন এবং ক্লোজ অ্যানিমেশন কাস্টমাইজ করতে পারেন।

<!-- মডাল HTML -->
<div class="popup my-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">My Popup</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is a custom popup.</p>
        <a href="#" class="close-popup">Close</a>
      </div>
    </div>
  </div>
</div>

/* কাস্টম অ্যানিমেশন */
.my-popup {
  animation: fadeIn 0.5s ease;
}

.my-popup.popup-out {
  animation: fadeOut 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

// মডাল ওপেন এবং ক্লোজ ইভেন্ট হ্যান্ডল করা
var popup = app.popup.open('.my-popup');

popup.on('popup:open', function () {
  console.log('Popup opened');
});

popup.on('popup:close', function () {
  console.log('Popup closed');
});

৩. অ্যাকর্ডিয়ান (Accordion) অ্যানিমেশন

Framework7 এর অ্যাকর্ডিয়ান কম্পোনেন্টে টগল করার সময় স্বয়ংক্রিয়ভাবে স্লাইড ডাউন এবং স্লাইড আপ অ্যানিমেশন ব্যবহৃত হয়, যা বিষয়বস্তুকে সুন্দরভাবে প্রদর্শন করে।

অ্যাকর্ডিয়ান উদাহরণ

<div class="list accordion-list">
  <ul>
    <li class="accordion-item">
      <a class="item-content item-link" href="#">
        <div class="item-inner">
          <div class="item-title">Accordion Title 1</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
          <p>Content for accordion 1.</p>
        </div>
      </div>
    </li>
    <li class="accordion-item">
      <a class="item-content item-link" href="#">
        <div class="item-inner">
          <div class="item-title">Accordion Title 2</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
          <p>Content for accordion 2.</p>
        </div>
      </div>
    </li>
  </ul>
</div>

এই উদাহরণে, ইউজার যখন অ্যাকর্ডিয়ানের টাইটেলে ক্লিক করবে, তখন সংশ্লিষ্ট বিষয়বস্তু সুন্দরভাবে স্লাইড করে প্রদর্শিত এবং লুকানো হবে।

৪. CSS ব্যবহার করে কাস্টম অ্যানিমেশন

Framework7 এর বিল্ট-ইন অ্যানিমেশন ছাড়াও, আপনি CSS ব্যবহার করে নিজস্ব কাস্টম অ্যানিমেশন তৈরি করতে পারেন। এটি আপনাকে আরও বেশি কাস্টমাইজেশন এবং ফ্লেক্সিবিলিটি প্রদান করে।

CSS Transition ব্যবহার করে কাস্টম অ্যানিমেশন

<button class="button button-fill" id="animateBtn">Animate Box</button>
<div id="box" class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: #2196f3;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.box.active {
  transform: translateX(200px);
  opacity: 0.5;
}

var $= Dom7;$('#animateBtn').on('click', function () {
  $$('#box').toggleClass('active');
});
এই উদাহরণে, বোতাম ক্লিক করলে বক্সের অবস্থান পরিবর্তন এবং অস্বচ্ছতা পরিবর্তিত হবে, যা একটি স্মুথ ট্রানজিশন ইফেক্ট তৈরি করবে।
CSS Keyframes ব্যবহার করে কাস্টম অ্যানিমেশন
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.bounce {
  animation: bounce 2s infinite;
}
Bouncing Text
এই উদাহরণে, .bounce ক্লাস যুক্ত করলে উপাদান ক্রমাগত বাউন্স করবে, যা একটি আকর্ষণীয় অ্যানিমেশন ইফেক্ট প্রদান করে।
৫. কাস্টম জাভাস্ক্রিপ্ট অ্যানিমেশন
Framework7 এর জাভাস্ক্রিপ্ট API ব্যবহার করে আরও ডাইনামিক এবং জটিল অ্যানিমেশন তৈরি করা যায়। আপনি JavaScript এর মাধ্যমে DOM এলিমেন্টের স্টাইল পরিবর্তন করতে পারেন বা Framework7 এর বিল্ট-ইন ফাংশন ব্যবহার করতে পারেন।
কাস্টম অ্যানিমেশন উদাহরণ
Fade In
Fade Out

.box {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.box.visible {
  opacity: 1;
}
var $$
 = Dom7;

$('#fadeInBtn').on('click', function () {$('#animatedBox').addClass('visible');
});

$('#fadeOutBtn').on('click', function () {$('#animatedBox').removeClass('visible');
});

এই উদাহরণে, দুটি বোতাম ব্যবহার করে একটি বক্সের ফেইড ইন এবং ফেইড আউট অ্যানিমেশন নিয়ন্ত্রণ করা হয়েছে।

৬. থিম ও প্ল্যাটফর্মভেদে অ্যানিমেশন

Framework7 বিভিন্ন থিম (iOS, Material Design) অনুসারে অ্যানিমেশন প্যাটার্ন নির্ধারণ করে। প্রতিটি থিমের নিজস্ব অ্যানিমেশন স্টাইল রয়েছে যা প্ল্যাটফর্মের নেটিভ লুক এবং ফিলকে মিলে।

থিম নির্বাচন

আপনি প্রজেক্ট তৈরির সময় থিম নির্বাচন করতে পারেন বা Runtime এ থিম পরিবর্তন করতে পারেন।

var app = new Framework7({
  root: '#app',
  theme: 'ios', // অথবা 'md' (Material Design)
});

থিমভেদে অ্যানিমেশন উদাহরণ

• iOS থিম: পেজ স্লাইড ইন ডান থেকে বামে, ডায়ালগ ফেইড ইন, অ্যাকর্ডিয়ান স্লাইড ডাউন/আপ।
• Material Design থিম: পেজ ফেইড ইন, মডাল স্কেল ইন, পপআপ ফেইড ইন।

সারাংশ

Framework7 এর বিল্ট-ইন অ্যানিমেশন এবং ট্রানজিশন ফিচারগুলি আপনার মোবাইল এবং ওয়েব অ্যাপ্লিকেশনকে আরও আকর্ষণীয় এবং ব্যবহার-বান্ধব করে তোলে। পেজ ট্রানজিশন, মডাল ও পপআপ অ্যানিমেশন, অ্যাকর্ডিয়ান স্লাইড ইফেক্ট, এবং কাস্টম CSS ও জাভাস্ক্রিপ্ট অ্যানিমেশন ব্যবহার করে আপনি একটি স্মুথ এবং ডাইনামিক ইউজার ইন্টারফেস তৈরি করতে পারেন। থিম অনুযায়ী অ্যানিমেশন প্যাটার্ন নির্ধারণ করে Framework7 প্ল্যাটফর্মভেদে নেটিভ অভিজ্ঞতা প্রদান করে, যা আপনার অ্যাপের প্রফেশনাল লুক এবং ফিল নিশ্চিত করে।

সম্পূর্ণ উদাহরণ

নীচে একটি সম্পূর্ণ উদাহরণ দেওয়া হলো যেখানে Framework7 এর বিল্ট-ইন অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করা হয়েছে:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Framework7 Animation Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #ff5722;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.5s ease;
      transform: translateY(20px);
    }
    .box.visible {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="view view-main">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Animation Example</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <button class="button button-fill" id="showBox">Show Box</button>
            <button class="button button-fill" id="hideBox">Hide Box</button>
          </div>
          <div class="block">
            <div id="box" class="box"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
  <script>
    var app = new Framework7({
      root: '#app',
      theme: 'ios', // অথবা 'md'
    });

    var $= Dom7;$('#showBox').on('click', function () {
      $$('#box').addClass('visible');
    });

    $$('#hideBox').on('click', function () {
      $$('#box').removeClass('visible');
    });
  </script>
</body>
</html>

এই উদাহরণে, দুটি বোতাম ব্যবহার করে একটি বক্সকে ফেইড এবং স্লাইড অ্যানিমেশন সহ প্রদর্শন এবং লুকানো হয়েছে। Framework7 এর থিম অনুযায়ী ডিফল্ট অ্যানিমেশনও পেজ পরিবর্তনের সময় স্বয়ংক্রিয়ভাবে প্রয়োগ হবে।

Framework7 এর বিল্ট-ইন অ্যানিমেশন এবং ট্রানজিশন ফিচারগুলি ব্যবহার করে আপনি সহজেই একটি স্মুথ, ডাইনামিক এবং প্রফেশনাল লুকিং অ্যাপ তৈরি করতে পারেন, যা আপনার ইউজারদের জন্য একটি উন্নত অভিজ্ঞতা প্রদান করবে।